@import "../varibles";
@import "../mixins/mixin";

.vue-calendar{
        position: absolute; 
        top: 0; 
        left:0;
        z-index:1000; 
        width: 100%; 
        min-height:100%;
        padding-bottom:20px;
        background: #fff; 

        ul,li{
                list-style:none;
                padding:0;
                margin:0;
        }

        .vue-calendar-item{
                text-align: center;

        }
        .vue-month{ 
                padding: 15px 0; 
                color: #313131; 
                font-size: 15px; 
                font-weight: bold;
                border-bottom: 1px solid #c9c9c9; 
        }
        .vue-day{

                &:after{
                        content:"";
                        display: block;
                        height:0;
                        overflow:hidden;
                        clear:both;
                }
        }
        .vue-day li{
                float:left;
                width: 14.285714285714286%;
                text-align:center;
                vertical-align:middle;
                line-height:45px;
        }
        .vue-date{ 
                width: 100%; 
                font-size: 15px;
                &:after{
                        content:"";
                        display: block;
                        height:0;
                        overflow:hidden;
                        clear:both;
                }
        }
        .vue-selected-suffix{
                display:block;
                padding-top:10px;
        }
        .vue-date li{
                float:left;
                width: 14.285714285714286%;
                height: 50px; 
                text-align:center; 
                overflow: hidden;
                word-break:break-all;
                cursor: pointer; 
                vertical-align:middle;
        }
        .vue-date li.vue-festival{
                color: #007aff; 
                font-weight: bold;
        }
        
        .vue-date li.vue-selected{ 
                background: #06c003; 
                color: #fff; 
                font-weight: bold;
        }
        .vue-date li.vue-invalid{ 
                color: #c9c9c9; 
                cursor:auto;
        }
        .vue-date li:hover{ 
                background: #fafafa;
        }
        .vue-date li.vue-invalid:hover{ 
                background:none;
        }
        .vue-date li.vue-selected:hover{ 
                background:#06c003;
        }
        .vue-calendar-more{
                text-align:center;
                padding:15px 0;
        }
        .vue-calendar-mask{
                display:none;
                position:fixed;
                top:0;
                bottom:0;
                z-index:999;
                width:100%;
                height:100%;
                background-color:#fff;
        }
        .vue-calendar-year{
                display: block;
                padding: 15px;
                text-align: left;
                color: #666;
                font-weight: 800;
                border-bottom:1px solid #e3e3e3;
                background-color: #f2f2f2;
        }
}